import React, { Component } from 'react';
import { Col, Row } from 'antd';

import './ConfigSwitch.less';

import ConfigChoice from './Control/ConfigChoice';
import ConfigSelect from './Control/ConfigSelect';
import ConfigText from './Control/ConfigText';
import ConfigNum from './Control/ConfigNum';

export default class ConfigSwitch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data
        };
    }

    HandleModuleSwitch(type, val, model_type) {
        let model_body = "";
        switch (type) {
            case "text":
                model_body = <ConfigText data={val} />;
                break;
            case "select":
                model_body = <ConfigSelect data={val} model={model_type} selectCallback={this.props.valueCallback} />;
                break;
            case "choice":
                model_body = <ConfigChoice data={val} model={model_type} selectCallback={this.props.valueCallback} />;
                break;
            case "number":
                model_body = <ConfigNum data={val} model={model_type} selectCallback={this.props.valueCallback} />;
                break;
            default: break;
        }
        return model_body;
    };

    render() {
        let _this = this;

        let modelstype = "item-title-middle";

        if (this.state.data.model_group.length < 2) {
            modelstype = "item-title-small";
        } else if (this.state.data.model.length > 3) {
            modelstype = "item-title-middle-4";
        } else if (this.state.data.type === "location") {
            modelstype = "item-title";
        }
        return (
            <Row className="row-mode">
                <div className={modelstype}>
                    <p>
                        {this.state.data.model}
                    </p>
                </div>
                <div className="item-content">{
                    this.state.data.model_group.map(function (val, index) {
                        return <Col key={index} span={24}>
                            {_this.HandleModuleSwitch(val.type, val, _this.state.data.type)}
                        </Col>
                    })}
                </div>
            </Row>
        );
    }
}